import { Component } from '@angular/core';
import { ApesTreeNode } from '@shared/apes/core';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';


@Component({
  selector: 'formly-field-tree-select',
  template: `
    <apes-tree-select
      style="width: 250px"
      [apesDefaultExpandedKeys]="expandKeys"
      [apesNodes]="nodes"
      apesShowSearch
      [apesPlaceHolder]="to.placeholder"
      [apesDisabled]="to.disabled"
      [formControl]="formControl"
      [formlyAttributes]="field"></apes-tree-select>
  `,
})
export class FormlyFieldTreeSelect extends ApesField {
  expandKeys = ['1001', '10001'];

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  nodes = [
    // new ApesTreeNode({
    //   title: 'root1',
    //   key: '1001',
    //   children: [
    //     {
    //       title: 'child1',
    //       key: '10001',
    //       children: [
    //         {
    //           title: 'child1.1',
    //           key: '100011',
    //           children: []
    //         },
    //         {
    //           title: 'child1.2',
    //           key: '100012',
    //           children: [
    //             {
    //               title: 'grandchild1.2.1',
    //               key: '1000121',
    //               isLeaf: true,
    //               disabled: true
    //             },
    //             {
    //               title: 'grandchild1.2.2',
    //               key: '1000122',
    //               isLeaf: true
    //             }
    //           ]
    //         }
    //       ]
    //     }
    //   ]
    // }),
    // new ApesTreeNode({
    //   title: 'root2',
    //   key: '1002',
    //   children: [
    //     {
    //       title: 'child2.1',
    //       key: '10021',
    //       children: [],
    //       disableCheckbox: true
    //     },
    //     {
    //       title: 'child2.2',
    //       key: '10022',
    //       children: [
    //         {
    //           title: 'grandchild2.2.1',
    //           key: '100221',
    //           isLeaf: true
    //         }
    //       ]
    //     }
    //   ]
    // })
  ];

  ngAfterViewInit() {
    this.getTreeData();
  }

  getTreeData() {
    this.apiService.post(this.to.api, { lastStage: this.to.hasOwnProperty('lastStage') }).subscribe(item => {
      this.nodes = item;
    });
  }

}
